<template>
	<app-layout>
		<view v-if="id" class="screen" @click='id=null'></view>
		<view class="search main-between">
			<view @click='beSearch' v-if="!toSearch" class="main-center search-content cross-center" style="flex: 1;">
				<image class="search-icon" src="/static/image/icon/icon-search.png"></image>
				<text class="search-text">搜索</text>
			</view>
			<view v-else class="dir-left-nowrap" style="flex: 1;">
				<input focus @blur='beSearch' class="box-grow-1 t-small search-content" @confirm='reload'
					confirm-type='search' v-model='keyword'></input>
			</view>
			<view @click="toAdd" v-if="!choice">
				<view class='add-goods dir-left-nowrap'>
					<image src='./../../image/add.png'></image>
					<view>添加商品</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 88rpx;"></view>
		<app-tab-nav v-if="choice" setTop="88rpx" :tabList="tabList" padding="0" :activeItem="activeTab"
			@click="tabStatus" theme="default">
		</app-tab-nav>
		<!-- <view class="">
			<view class="">
				平台商品
			</view>
			<view class="">
				店铺商品
			</view>
		</view> -->
		<view class="goods-style" :style="{paddingBottom:choice ? '152rpx': '24rpx'}">
			<view class="msg-item" @click='id=null' v-for="item in list" :key="item.id">
				<image class="msg-img" :src='item.cover_pic'></image>
				<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
					<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
				</view>
				<view class="t-omit-two goods-name">{{item.name}}</view>
				<view class='goods-price'>¥{{item.price}}</view>
				<view class='goods-num'>库存:{{item.goods_stock}}</view>
				<view class="chanced" v-if="choice" @click="tochoice(item)">
					<icon type="success" size="18" color="#ff4544" v-if="item.ischanged"></icon>
					<view class="nochanged" v-else-if="!item.ischanged"></view>
				</view>
				<image v-if="!choice" class='more-handle' @click.stop='showMenu(item.id)'
					src='./../../image/more-handle.png'></image>
				<view v-if="item.id == id && !choice" class='main-between more'>
					<view @click.stop="toEdit(item.id)">
						<view class='more-item'>
							<image src='./../../image/goods-edit.png'></image>
							<view>编辑</view>
						</view>
					</view>
					<view v-if="item.status == 1" @click.stop="toSwitch(0,item.id)">
						<view class='more-item'>
							<image src='./../../image/goods-xiajia.png'></image>
							<view>下架</view>
						</view>
					</view>
					<view v-if="item.status == 0 && is_goods_audit == 0" @click.stop="toSwitch(1,item.id)">
						<view class='more-item'>
							<image src='./../../image/goods-xiajia.png' style="transform: rotate(180deg)"></image>
							<view>上架</view>
						</view>
					</view>
					<view
						v-if="(item.mch_goods.status == 0 || item.mch_goods.status == 3) && item.status == 0 && is_goods_audit == 1"
						@click.stop="toSwitch(2,item.id)">
						<view class='more-item'>
							<image src='./../../image/goods-xiajia.png' style="transform: rotate(180deg)"></image>
							<view>申请上架</view>
						</view>
					</view>
					<view @click.stop="toDelete(item.id)">
						<view class='more-item'>
							<image src='./../../image/goods-del.png'></image>
							<view>删除</view>
						</view>
					</view>
				</view>
				<view v-if="item.id == id" class='and-more'></view>
			</view>
		</view>
		<view class="befbutton" @click="submit" v-if="choice">
			<button class="fbutton bsbut">确认选择这{{qungoodsnum}}件商品</button>
		</view>
		<view class='no-tip' v-if="list.length == 0">
			<image :src='adminImg.no_goods'></image>
			<view>没有任何商品哦~</view>
		</view>
		<view class="dialog" v-if="is_switch || is_delete || apply_up">
			<view class="dialog-item" v-if="is_switch || is_delete || apply_up">
				<view class="dialog-title">提示</view>
				<view class="dialog-txt" v-if="is_switch && status== 0">是否下架该商品</view>
				<view class="dialog-txt" v-if="is_switch && status== 1">是否上架该商品</view>
				<view class="dialog-txt" v-if="apply_up">是否申请上架该商品</view>
				<view class="dialog-txt" v-if="is_delete">是否删除该商品</view>
				<view class="main-center btn-area">
					<view class="submit-btn" @click='cancel'>取消</view>
					<view class="line"></view>
					<view v-if="is_switch" class="submit-btn be-submit" @click='goods_switch'>确认</view>
					<view v-if="is_delete" class="submit-btn be-submit" @click='goods_destroy'>确认</view>
					<view v-if="apply_up" class="submit-btn be-submit" @click='applyStatus'>确认</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";

	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				keyword: '',
				tabList: [{
						id: 1,
						name: '自有商品'
					},
					{
						id: 2,
						name: '平台商品'
					}
				],
				activeTab: '1',
				qungoods: [],
				qungoodsnum: 0,

				page: 1,
				page_count: 1,

				id: null,
				more_list: false,
				iphone_x: false,
				status: null,
				page_loading: true,
				sort_type: 0,
				sort: 1,
				is_goods_audit: 1,
				go_status: 1,
				is_sold_out: 0,
				list: [],
				is_switch: false,
				is_delete: false,
				apply_up: false,
				toSearch: false,
				device: null,
				mch_id: 0,
				ischanged: false,
				// 是否显示选择
				choice: true,
				qunGoodsidList: [] // 已选择的id
			}
		},
		components: {
			"app-tab-nav": appTabNav
		},
		computed: {
			...mapState({
				appImg: state => state.mallConfig.__wxapp_img.mall,
				appSetting: state => state.mallConfig.mall.setting,
				adminImg: state => state.mallConfig.__wxapp_img.mch,
			})
		},
		methods: {
			tabStatus(e) { // 切换平台与自己（事业合伙人）的商品
				// console.log(e.currentTarget.dataset.id);
				this.list = []
				this.page = 1
				this.page_count = 1
				this.qungoods = []
				this.qungoodsnum = 0
				this.qunGoodsidList = []

				// this.$storage.removeStorageSync('isQunGoods')
				this.activeTab = e.currentTarget.dataset.id;

				this.list.map((item) => {
					this.$set(item, 'ischanged', false)
				})

				if (this.activeTab == 2) {
					// console.log(999);
					this.getMallGoodsList()
				} else if (this.activeTab == 1) {
					this.getList();
				}
			},
			async getMallGoodsList() { // 平台商品列表
				// console.log(888);
				const res = await this.$request({
					url: this.$apiSol.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: 0,
						sort: 1,
						sort_type: 1,
						keyword: '',
						coupon_id: 0,
						mch_id: 0,
						sign: '',
					}
				});
				// console.log(res, 777);
				if (res.code === 0) {
					this.page_count = res.data.pagination.page_count;
					if (this.page === 1) {
						this.list = res.data.list;
					} else {
						this.list.push(...res.data.list);
					}
					// let isgoods = this.$storage.getStorageSync('isQunGoods')
					this.list.map((item) => {
						// 注释后，下拉选中不消失
						// this.$set(item, 'iselect', false)
						if (this.qunGoodsidList) {
							for (let i = 0; i < this.qunGoodsidList.length; i++) {
								if (this.qunGoodsidList[i] == item.id) {
									this.$set(item, 'ischanged', true)
								}
							}
						}
					})
					if (this.page === 1 && this.page_count === 1) {
						this.noGoods = true;
					}
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			submit() { // 确认选择
				this.$storage.setStorageSync('isQunGoods', this.qungoods)
				let routes = getCurrentPages()
				// console.log(routes);
				routes[routes.length - 2].$vm.activeTab = this.activeTab
				uni.navigateBack({
					delta: 1
				})
			},
			tochoice(item) { // 选择商品
				// console.log(item);
				item.ischanged = !item.ischanged
				// this.$set(item,'ischanged',true)
				// console.log(item.ischanged);
				if (item.ischanged == true) {
					/* if (this.qungoods.length == 10) {
						uni.showToast({
							title: '最多可选十件商品',
							icon: 'none'
						})
						item.ischanged = false
						return;
					} */
					this.qungoods.push(item)
				} else if (item.ischanged == false) {
					for (let i = 0; i < this.qungoods.length; i++) {
						if (this.qungoods[i].id == item.id) {
							this.qungoods.splice(i, 1);
						}
					}
				}
				// console.log(this.qungoods);
				this.qungoodsnum = this.qungoods.length
				this.$forceUpdate()
			},
			toEdit(id) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/mch/add-goods/add-goods?id=' + id + '&mch_id=' + this.mch_id
				})
				setTimeout(() => {
					this.id = null
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/mch/add-goods/add-goods?mch_id=' + this.mch_id
				})
			},
			beSearch() {
				if (this.keyword.length == 0) {
					this.toSearch = !this.toSearch
				} else {
					this.toSearch = this.toSearch;
				}
			},
			reload() {
				this.id = null;
				this.getList();
			},
			cancel() {
				this.id = null;
				this.is_delete = false;
				this.is_switch = false;
				this.apply_up = false;
			},
			toDelete(e) {
				this.is_delete = true;
			},
			showMenu(id) {
				if (this.id == id) {
					this.id = null
				} else {
					this.id = id;
				}
			},
			toSwitch(status, id) {
				let that = this;
				that.id = id;
				if (status == 2) {
					that.apply_up = true;
				} else {
					that.status = status;
					that.is_switch = true;
				}
			},

			applyStatus() {
				let that = this;
				that.apply_up = false;
				uni.showLoading({
					title: '申请中...'
				});
				that.$request({
					url: that.$apiSol.mch.apply_status,
					method: 'post',
					data: {
						mch_id: that.mch_id,
						id: that.id,
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(function() {
							that.reload();
						}, 1000)
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
				});
			},
			getList() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				that.list = [];
				that.page = 1;
				that.$request({
					url: that.$apiSol.mch.goods,
					data: {
						page: that.page,
						mch_id: that.mch_id,
						sort: that.sort,
						sort_type: that.sort_type,
						keyword: that.keyword,
						status: that.go_status,
						is_sold_out: that.is_sold_out,
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						that.list = response.data.list;

						// let isgoods = that.$storage.getStorageSync('isQunGoods')
						that.list.map((item) => {
							// 注释后，下拉选中不消失
							// this.$set(item, 'iselect', false)
							/* if (isgoods) {
								for (let i = 0; i < isgoods.length; i++) {
									if (isgoods[i].id == item.id) {
										that.$set(item, 'ischanged', isgoods[i].ischanged)
									}
								}
							} */
							if (that.qunGoodsidList) {
								for (let i = 0; i < that.qunGoodsidList.length; i++) {
									if (that.qunGoodsidList[i] == item.id) {
										that.$set(item, 'ischanged', true)
									}
								}
							}
							// console.log(that.list);
						})

						// that.list.map(item => {
						// 	item.ischanged = false
						// 	// that.$set(item, 'ischanged', false)
						// })

						// console.log(that.list);
						that.page++;
						that.more_list = false;
						if (response.data.list.length == 10) {
							that.more_list = true;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
				});
			},
			getMore() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				that.$request({
					url: that.$apiSol.mch.goods,
					data: {
						page: that.page,
						mch_id: that.mch_id,
						sort: that.sort,
						sort_type: that.sort_type,
						keyword: that.keyword,
						status: that.go_status,
						is_sold_out: that.is_sold_out,
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						that.list = that.list.concat(response.data.list);
						/* that.list.map(item => {
							item.ischanged = false
						}) */
						// let isgoods = that.$storage.getStorageSync('isQunGoods')
						that.list.map((item) => {
							// 注释后，下拉选中不消失
							// this.$set(item, 'iselect', false)
							/* if (isgoods) {
								for (let i = 0; i < isgoods.length; i++) {
									if (isgoods[i].id == item.id) {
										that.$set(item, 'ischanged', isgoods[i].ischanged)
									}
								}
							} */
							if (that.qunGoodsidList) {
								for (let i = 0; i < that.qunGoodsidList.length; i++) {
									if (that.qunGoodsidList[i] == item.id) {
										that.$set(item, 'ischanged', true)
									}
								}
							}
						})
						that.page++;
						that.more_list = false;
						if (response.data.list.length == 10) {
							that.more_list = true;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
				});
			},
			goods_destroy() {
				let that = this;
				that.is_delete = false;
				uni.showLoading({
					title: '加载中...'
				});
				that.$request({
					url: that.$apiSol.mch.destroy,
					data: {
						mch_id: that.mch_id,
						id: that.id
					},
					method: 'post'
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(function() {
							that.reload();
						}, 1000)
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					un

				});
			},

			goods_switch() {
				let that = this;
				that.is_switch = false;
				uni.showLoading({
					title: '加载中...'
				});
				that.$request({
					url: that.$apiSol.mch.switch_status,
					data: {
						mch_id: that.mch_id,
						id: that.id
					},
					method: 'post'
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(function() {
							that.reload();
						}, 1000)
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
				});
			},

			getSetting() {
				let that = this;
				that.$showLoading({
					type: 'global',
					text: '加载中...'
				});
				that.$request({
					url: that.$apiSol.mch.setting
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						that.is_goods_audit = response.data.setting.is_goods_audit;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
		},

		onReachBottom: function() {
			if (this.activeTab == 2) {
				if (this.page < this.page_count) {
					this.page++
					this.getMallGoodsList()
				}
			} else {
				if (this.more_list) {
					this.getMore();
				}
			}
		},

		onLoad(options) {
			let that = this;
			// console.log(options);
			that.mch_id = options.mch_id;
			that.choice = options.choice || false;
			that.activeTab = options.activeTab || 1;
			// console.log(options);
			that.qunGoodsidList = options.qunGoodsidList ? options.qunGoodsidList.split(',') : [];

			that.qungoodsnum = that.qunGoodsidList.length
			// console.log(that.qunGoodsidList);
			// console.log(that.qungoodsnum);
			// let solist = this.$storage.getStorageSync('isQunGoods')
			// console.log(solist, 8756987);
			// if (solist) {
			// 	this.qungoods = solist
			// 	this.qungoodsnum = solist.length
			// }
			/* if (that.qunGoodsidList.length > 0) {
				for (let i = 0; i < that.qunGoodsidList.length; i++) {
					that.qungoodsnum = solist.length
				}
			} */
			// console.log(that.mch_id);
			that.go_status = 1;
			that.is_sold_out = 0;
			that.getSetting();
		},

		onShow(options) {
			let that = this;
			// that.getList();
			if (that.activeTab == 2) {
				that.getMallGoodsList()
			} else {
				that.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		z-index: 30;
		height: #{88rpx};
		padding: #{16rpx} #{35rpx};
		background-color: #EFEFF4;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	.search input {
		padding: 0 #{30rpx};
	}

	.search-content {
		background-color: #fff;
		height: #{56rpx};
		border-radius: #{28rpx};
		width: #{502rpx};
	}

	input.search-content {
		width: #{482rpx};
		font-size: #{26rpx};
	}

	.goods-style {
		padding-bottom: 152rpx;
	}

	.msg-item {
		margin: #{24rpx};
		margin-bottom: 0;
		background-color: #fff;
		border-radius: 4rpx;
		position: relative;
		padding: #{24rpx};

		.out-dialog {
			width: #{148rpx};
			height: #{148rpx};
			position: absolute;
			top: #{24rpx};
			left: #{24rpx};
			z-index: 5;
			background-color: rgba(0, 0, 0, .5);

			image {
				width: #{148rpx};
				height: #{148rpx};
			}
		}
	}

	.msg-img {
		height: #{148rpx};
		width: #{148rpx};
		display: block;
	}

	.goods-name {
		font-size: #{26rpx};
		color: #353535;
		position: absolute;
		top: #{22rpx};
		left: #{192rpx};
		width: #{486rpx};
	}

	.goods-price {
		font-size: #{32rpx};
		color: #ff4544;
		position: absolute;
		bottom: #{55rpx};
		left: #{192rpx};
	}

	.chanced {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 16rpx;
		right: 36rpx;
	}

	.changed {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #446dfd;
		border: 1rpx solid #446dfd;
	}

	.nochanged {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 1rpx solid #ff4544;
	}

	.goods-num {
		font-size: #{24rpx};
		color: #999999;
		position: absolute;
		bottom: #{20rpx};
		left: #{192rpx};
	}

	.add-goods {
		width: #{180rpx};
		height: #{56rpx};
		line-height: #{54rpx};
		border-radius: #{28rpx};
		border: #{1rpx} solid #ff4544;
		padding-left: #{18rpx};
		font-size: #{26rpx};
		color: #ff4544;
		margin-left: #{20rpx};
		background-color: #fff;
	}

	.add-goods image {
		height: #{28rpx};
		width: #{28rpx};
		margin-right: #{8rpx};
		margin-top: #{14rpx};
		display: block;
	}

	.more-handle {
		height: #{56rpx};
		width: #{56rpx};
		position: absolute;
		bottom: #{16rpx};
		right: #{24rpx};
	}

	.more {
		height: #{100rpx};
		border-radius: #{8rpx};
		background-color: rgba(0, 0, 0, .75);
		padding: #{18rpx} 0 #{8rpx};
		font-size: #{20rpx};
		color: #fff;
		z-index: 6;
		position: absolute;
		bottom: #{62rpx};
		right: #{24rpx};
	}

	.more-item {
		width: #{90rpx};
		text-align: center;
	}

	.more .more-item image {
		height: #{40rpx};
		width: #{40rpx};
	}

	.and-more {
		width: 0;
		height: 0;
		border-left: #{10rpx} solid transparent;
		border-right: #{10rpx} solid transparent;
		border-top: #{10rpx} solid rgba(0, 0, 0, .75);
		position: absolute;
		bottom: #{54rpx};
		right: #{44rpx};
		z-index: 6;
	}

	.screen {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0)
	}

	.btn-area {
		height: #{88rpx};
		position: relative;
		border-top: #{1rpx} solid #e2e2e2;
	}

	.btn-area .line {
		height: #{32rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
		position: absolute;
		top: #{28rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.submit-btn {
		height: #{88rpx};
		line-height: #{88rpx};
		font-size: #{32rpx};
		color: #666;
		width: #{310rpx};
		text-align: center;
	}

	.submit-btn.be-submit {
		color: #ff4544;
	}

	.dialog {
		position: fixed;
		height: 100%;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 50;
		background-color: rgba(0, 0, 0, .3);
	}

	.dialog-item {
		padding-top: #{35rpx};
		position: fixed;
		top: 30%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: #{620rpx};
		border-radius: #{16rpx};
		background-color: #fff;
	}

	.dialog-title {
		font-size: #{32rpx};
		color: #353535;
		margin-bottom: #{6rpx};
		text-align: center;
	}

	.dialog-txt {
		margin: #{40rpx} auto;
		text-align: center;
		font-size: #{32rpx};
		color: #353535;
	}

	.no-tip {
		position: fixed;
		top: #{350rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
		color: #666666;
		font-size: #{24rpx};
		width: #{240rpx};
		text-align: center;
	}

	.no-tip image {
		height: #{240rpx};
		width: #{240rpx};
		margin-bottom: #{20rpx};
	}

	.bottom-place {
		height: #{116rpx};
	}

	.bottom-place.iphone_x {
		height: #{166rpx};
	}

	.search-icon {
		height: #{24rpx};
		width: #{24rpx};
	}

	.search-text {
		color: #b2b2b2;
		font-size: #{24rpx};
		margin: 0 #{5rpx};
	}

	.top-place {
		height: #{88rpx};
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 12rpx auto;
		overflow: hidden;
		position: fixed;
		bottom: 24rpx;
		left: 32rpx;
	}

	.fbutton {
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;

	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}
</style>
